<template>
  <div>
    <content-header-wrapper />
    <a-card style="margin: 10px 0 0 0">
      <div>
        <h2>{{ $route.meta.title }}</h2>
        <a-button type="primary" @click="appendModal"> 添加学校 </a-button>
        <a-input
          v-model="schoolName"
          placeholder="请输入学校名进行查询"
          allowClear
          style="width: 220px; margin-left: 20px"
        />
        <a-button type="primary" style="margin-left: 10px" @click="fetch"
          >搜索</a-button
        >
      </div>
      <a-table
        :columns="columns"
        :data-source="data"
        :row-key="(record) => record.schoolId"
        :pagination="pagination"
        :loading="tableLoading"
        @change="handleTableChange"
      >
        <span slot="action" slot-scope="text, record">
          <a @click="showDetailModal(record.noticeId, record)">详情 </a>
          <a-divider type="vertical" />
          <a @click="compileModal(record.noticeId, record)">编辑</a>
          <a-divider type="vertical" />
          <a @click="deleteModal(record)" color="#f50">删除</a>
        </span>
      </a-table>
      <br />
      <a-modal
        v-model="visible"
        :confirm-loading="confirmLoading"
        title="信息提示框"
        @ok="submit"
        @cancel="handleCancel"
      >
        <p style="text-align: center; font-size: 20px" v-if="deleteExamples">
          <a-layout-content>确认删除吗？</a-layout-content>
        </p>
        <a-form
          v-if="appendExamples"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          id="formAppend"
          class="user-layout-login"
          ref="formAppend"
          :form="form"
          @submit="submit"
        >
          <a-form-model-item label="学校名">
            <a-input
              placeholder="输入学校名"
              v-decorator="[
                'schoolName', // 给表单赋值或拉取表单时，该input对应的key
                // @blur 是当元素失去焦点时所触发的事件
                {
                  rules: [{ required: true, message: '请输入学校名' }],
                  validateTrigger: 'blur',
                },
              ]"
            />
          </a-form-model-item>
        </a-form>
      </a-modal>
    </a-card>
  </div>
</template>
<script>
import request from "@/utils/request";
import ContentHeaderWrapper from "../../components/ContentHeaderWrapper/ContentHeaderWrapper.vue";
const data = [];
const columns = [
  {
    title: "学校id",
    dataIndex: "schoolId",
    key: "schoolId",
  },
  {
    title: "学校名",
    dataIndex: "schoolName",
    key: "schoolName",
  },
  {
    title: "操作",
    key: "action",
    scopedSlots: { customRender: "action" },
  },
];
const schoolUrl = {
  append: "/school/append",
  upData: "/school/upName",
  delete: "/school/remove",
  query: "/school/qry",
};
export default {
  components: { ContentHeaderWrapper },
  name: "school",
  data() {
    return {
      schoolName: "",
      size: "middle",
      visible: false,
      data: data,
      examples: {},
      showDetail: false,
      appendExamples: false,
      deleteExamples: false,
      compile: false,
      labelCol: { span: 3 },
      wrapperCol: { span: 20 },
      confirmLoading: false,
      opinions: "0",
      form: this.$form.createForm(this), // 只有这样注册后，才能通过表单拉取数据
      pagination: {
        //自定义每页显示数目
        showSizeChanger: true,
        onShowSizeChange: (current, pageSize) => {
          console.log(current, pageSize);
          this.pageSize = pageSize;
        },
        //自定义每页显示项目的选项
        pageSizeOptions: ["10", "20", "50"],
      },
      tableLoading: false,
      columns: columns,
    };
  },
  mounted() {
    this.fetch();
  },
  methods: {
    handleTableChange(pagination, filters, sorter) {
      console.log(pagination);
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      this.pagination = pager;
      this.fetch({
        size: pagination.pageSize,
        page: pagination.current,
      });
    },
    fetch(params = {}) {
      console.log("params:", params);
      this.tableLoading = true;
      request({
        url: schoolUrl.query,
        method: "post",
        data: {
          currPage: params.size,
          pageSize: params.page,
          queryObj: {
            schoolName: this.schoolName ? this.schoolName : null,
          },
        },
        type: "json",
      }).then((data) => {
        const pagination = { ...this.pagination };
        // Read total count from server
        // pagination.total = data.totalCount;
        var noteData = data.data.data;
        pagination.total = noteData.total;
        this.tableLoading = false;
        this.data = noteData.list;
        this.pagination = pagination;
      });
      setTimeout(function () {
        this.tableLoading = false;
      }, 2000);
    },
    deleteModal(b) {
      this.examples = b;
      this.visible = true;
      this.deleteExamples = true;
    },
    appendModal() {
      this.visible = true;
      this.appendExamples = true;
    },
    compileModal(b) {
      this.examples = b;
      this.visible = true;
      this.compile = true;
    },
    handleCancel(e) {
      this.visible = false;
      this.showDetail = false;
      this.compile = false;
      this.deleteExamples = false;
      this.appendExamples = false;
    },
    submit(e) {
      if (this.appendExamples) {
        this.append();
        this.handleCancel(e);
      } else if (this.compile) {
        this.upData(this.noticeExamples);
        this.confirmLoading = true;
        setTimeout(() => {
          this.visible = false;
          this.confirmLoading = false;
          this.handleCancel(e);
        }, 2000);
      } else if (this.deleteExamples) {
        this.delete(this.examples);
        this.confirmLoading = true;
        setTimeout(() => {
          this.visible = false;
          this.confirmLoading = false;
          this.handleCancel(e);
        }, 2000);
      }
    },
    upData(e) {
      request({
        url: schoolUrl.upData,
        method: "post",
        data: e,
        type: "json",
      }).then((data) => {
        this.$notification.open({
          message: "更新完成",
          icon: <a-icon type="smile" style="color: #108ee9" />,
        });
      });
    },
    delete(e) {
      request({
        url: schoolUrl.delete,
        method: "post",
        data: e,
        type: "json",
      }).then((data) => {
        this.fetch({
          size: this.pagination.pageSize,
          page: this.pagination.current,
        });
        this.$notification.open({
          message: "删除成功",
          icon: <a-icon type="smile" style="color: #108ee9" />,
        });
      });
    },
    append() {
      const {
        form: { validateFields },
      } = this;
      const validateFieldsKey = ["schoolName"];
      validateFields(validateFieldsKey, { force: true }, (err, values) => {
        if (!err) {
          request({
            url: schoolUrl.append,
            method: "post",
            data: {
              schoolName: values.schoolName,
              schoolStatus: 0,
            },
            type: "json",
          }).then((data) => {
            this.$notification.open({
              message: "新增完成",
              icon: <a-icon type="smile" style="color: #108ee9" />,
            });
            this.fetch({
              size: this.pagination.pageSize,
              page: this.pagination.current,
            });
          });
        } else {
          return;
        }
      });
    },
  },
};
</script>
